<script>
export default {
  name: "Main",
  methods:{
    logout(){
      //获取本地存储的值
      //let item = localStorage.getItem('loginStatus');
      //清除本地存储的登录状态
      localStorage.removeItem('loginStatus')
      //清空本地存储
      //localStorage.clear()
      this.$router.push('/login');
    }
  }
}
</script>

<template>
  <div>
    <ul class="list">
      <li>
        <router-link to="/">首页</router-link>
      </li>
      <li>

        <router-link to="/news" >新闻</router-link>

      </li>
      <li>

        <router-link to="/remark" >评论</router-link>

      </li>
      <li>
        <!-- replace:不会把页面记录加入到浏览器历史中       -->
<!--        <router-link to="logout" replace>退出</router-link>-->
        <button @click="logout">退出</button>
      </li>
    </ul>
    <div class="view">
<!-- 渲染组件的位置     -->
      <RouterView/>
    </div>

  </div>
</template>

<style scoped>
  .list{
    list-style: none;
    width: 100%;
    height: 20px;
  }
  .list li{
    width: 120px;
    float: left;
  }
  .view{
    clear: both;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    height: 100vh;

  }
</style>